<template>
 <div class="artist-detail p-5" v-if="artistDetail">
    <Info :artist-detail="artistDetail" />

    <el-tabs class="mt-3" v-model="tab">
      <el-tab-pane lazy :label="`歌曲 ${artistDetail.artist.musicSize}`" name="music">
        <Songs :song-data="songData"/>
        <Pagination @page-change="getArtistSongInfo" :current-page="pageData.page" :total="pageData.total"
          :page-size="pageData.limit" />
        </el-tab-pane>
        <el-tab-pane lazy :label="`专辑 ${artistDetail.artist.albumSize}`" name="album">
      </el-tab-pane>
      <el-tab-pane lazy :label="`视频 ${artistDetail.artist.mvSize}`" name="mv">
      </el-tab-pane>
    </el-tabs>
 </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue"
import { useArtistDetail, useArtistSongs } from "@/api/api.ts"
import { useRoute } from "vue-router"
import type { ArtistDetail } from "@/models/singer.ts"
import type { SongsData } from "@/models/playlist.ts"
import Info from "./Info.vue"
import Songs from "@/components/common/playlist/SongList.vue"
import Pagination from "@/components/common/Pagination.vue"
const route = useRoute()
const id = Number(route.query.id);
const artistDetail = ref<ArtistDetail>()
const tab = ref('music')
const songData=ref<SongsData>([])
const pageData = reactive({
  id: id,
  page: 1,
  limit: 10,
  order: 'time',
  total:0
})
onMounted(async () => {
  getArtistDetail()
  getSongData()
})
//歌手信息
const getArtistDetail = async () => {
  useArtistDetail(id).then(res => {
    artistDetail.value = res.data.data
  })
}
//歌手的歌曲
const getSongData = async () => {
  useArtistSongs(pageData.id, pageData.order, pageData.limit, (pageData.page - 1) * pageData.limit).then(res => {
    songData.value=res.data.songs
    pageData.total=res.data.total
  })
}
/* 页面改变后数据更新 */
const getArtistSongInfo = async (newPage: number) => {
  await useArtistSongs(id, pageData.order,pageData.limit, (newPage - 1) * pageData.limit).then(res => {
    songData.value = res.data.songs
    pageData.page = newPage
  })
}
</script>
<style lang="scss" scoped>




</style>
